<template>
    <div>
        <!-- 此组件两个表 -->


        <!-- 左表 -->
        <div :class="roleAddIsShow?'roleAdd':'role'">
            <!-- 头部 -->
            <div class="userHeader">
                <!-- 搜索栏 -->
                <div class="searchSlot">
                    <slot name="searchSlotLeft"></slot>
                </div>
                <!-- 添加附加功能栏 -->
                <div class="btnSlot">
                    <slot name="btnSlotLeft"></slot>
                </div>
                <!-- 选择状态显示栏 -->
                <div class="tbBox">
                  
                    <a @click="clearSelect()">清空</a>
                </div>
            </div>

            <!-- 左table数据栏 -->
            <div>
                <!-- handleSelectionChange点击select事件 -->
                <el-table @row-click="rowClick" ref="multipleTable" :data="tableData" style="width: 100%"
                    :max-height="maxHeight" :stripe="stripe" border row-key="id"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <!-- 筛选列 -->
                    <el-table-column width="55">
                        <template slot-scope="scope">
                            <!-- {{&nbsp;}} 或者 {{""}}-->
                            <el-radio v-model="id" :label="scope.row.id">{{""}}</el-radio>
                        </template>

                    </el-table-column>

                    <!-- 循环 item.prop-->
                    <el-table-column align="center" v-for="(item, index) in headerData" :key="index" :prop="item.prop"
                        :label="item.label" :width="item.width" :sortable="item.sortable">
                        <template slot-scope="scope">
                            <div v-if="item.slot">
                                <slot :name="item.prop" v-bind:row="scope.row" v-bind:scope="scope"></slot>
                            </div>
                            <div v-if="!item.slot">
                                {{ tableData[scope.$index][item.prop] }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>

        <!-- 右表 -->
        <div class="roleAdd2" v-if="roleAddIsShow">
            <div class="closeRight" @click="closeRight">×</div>
            <!-- 头部 -->
            <div class="userHeader">
                <!-- 搜索栏 -->
                <div class="searchSlot">
                    <slot name="searchSlotRight"></slot>
                </div>
                <!-- 添加附加功能栏 -->
                <div class="btnSlot">
                    <slot name="btnSlotRight"></slot>
                </div>
                <!-- 选择状态显示栏 -->
                <div class="tbBox">
                    已选择{{num}}项，
                    <a @click="toggleSelection()">清空</a>
                </div>
            </div>

            <!-- 右边table数据栏 -->
            <div>
                <!-- handleSelectionChange点击select事件 -->
                <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableDataAdd"
                    style="width: 100%" :max-height="maxHeight" :stripe="stripe" border row-key="id">
                    <!-- 筛选 -->
                    <el-table-column type="selection" width="55"> </el-table-column>


                    <!-- 正常item -->
                    <el-table-column align="center" v-for="(item, index) in headerDataAdd" :key="index"
                        :prop="item.prop" :label="item.label" :width="item.width" :sortable="item.sortable">
                        <template slot-scope="scope">
                            <div v-if="item.slot">
                                14

                            </div>
                            <div v-if="!item.pic">
                                {{ tableDataAdd[scope.$index][item.prop] }}
                            </div>

                        </template>
                    </el-table-column>
                </el-table>

               
            </div>
        </div>
    </div>

</template>
  
<script>
import { roleTableDataAdd } from "@/api/api-wwx/sysRole";
export default {
    name: "systemComponent",
    props: {
        headerData: {
            type: Array,
            default: () => {
                return [];
            },
        },
        headerDataAdd: {
            type: Array,
            default: () => {
                return [];
            },
        },
        tableData: {
            type: Array,
            default: () => {
                return [];
            },
        },

        stripe: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        border: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        maxHeight: {
            type: Number,
            default: () => {
                return 600;
            },
        },
        // 当前第几页
        currentpage: {
            type: Number,
            default: () => {
                return 1;
            },
        },
        // 一页多少条
        pagesize: {
            type: Number,
            default: () => {
                return 10;
            },
        },
        //总条件
        total: {
            type: Number,
            default: () => {
                return 0;
            },
        },
        multipleTable: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            num: 0,
            radioSelectId: '',
            roleAddIsShow: false,
            //页码
            pageNo: 1,
            pageSize: 10,
            id: '',
            tableDataAdd: [],

        }
    },

    methods: {
        // 选中数量改变
        handleSelectionChange(val) {
            this.num = val.length
            console.log(val.length);
        },

        toggleSelection() {
            this.$refs.multipleTable.clearSelection();
        },

        // 页码处理
        handleSizeChange(val) {
            //val是默认传过来的，要好好记住
            this.$emit("SizeChange", val); //CurrentChange是名字，传的值为val
        },
        handleCurrentChange(val) {
            //val是默认传过来的，要好好记住
            let _self = this;
            _self.$emit("CurrentChange", val);
        },


        // 单选选中
        rowClick(row) {
            this.radioSelectId = row.id;
            console.log(this.radioSelectId);
            this.roleAddIsShow = true
            let idToFather = this.radioSelectId
            this.$emit('toFather', idToFather)
            this.id = this.radioSelectId


            this.roleTableDataAddSearch()
        },
        // 获取右侧表格数据
        roleTableDataAddSearch() {
            console.log(1234);
            let _self = this;
            let data = {
                pageNo: _self.pageNo,
                pageSize: _self.pageSize,
                roleId: _self.id
            };
            roleTableDataAdd(data).then((res) => {
                console.log(res);
                if (res.code == 0) {
                    _self.tableDataAdd = [];
                    let list = res.result.records;
                    console.log(list);
                    for (let item of list) {
                        console.log(item);
                        _self.tableDataAdd.push({
                            username: item.username,
                            realname: item.realname,
                            status_dictText: item.status_dictText
                        });

                    }

                }
            });
        },
        closeRight(){
            this.roleAddIsShow=false
        },
        clearSelect(){
            this.id=''
        }

    },
};
</script>
  
<style>
.tbBox {
    padding-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 35px;
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    border-radius: 5px;
}

.role {
    background-color: white;
    padding: 30px 20px;
}

.roleAdd {
    width: calc(50% - 20px);
    float: left;
    background-color: white;
    margin: 10px;
    padding: 10px
}

.roleAdd2 {
    width: calc(50% - 20px);
    float: left;
    background-color: white;
    height: 700px;
    margin: 10px;
    padding: 10px;
    position: relative;
}
.closeRight{
    position:absolute;
    right:20px;
    border: 1px solid rgb(192, 189, 189);
    width: 30px;
    text-align: center;
    height: 30px;
    border-radius: 50%;
    line-height:30px;
}
.closeRight:hover{
    cursor: pointer;
}
</style>